import { Component, toNative, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import Left from './layout/Left'
import Main from './layout/Main'
import router from './router'
import { RouterView, type RouteRecord } from 'vue-router'
import { useBasicStore } from '@/stores/basic'
import { ConfigProvider } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import useUserStore from '@/stores/user'

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import theme from '../themeExtend.js'


console.log(2121, theme())

@Component
export class AppView extends Render {
    router = router.currentRoute

    basicStore = useBasicStore()

    @Watch('router', { immediate: true })
    fullscreenWatch(newValue: RouteRecord) {
        this.fullscreen = !!newValue.meta.fullscreen
    }

    fullscreen = false
    
    globalTheme = {
        token: {
            colorPrimary: theme().colors.blue['100']  //'#3E5FF5'
        },
        hashed: false
    }

    render() {
        return <ConfigProvider theme={this.globalTheme} locale={zhCN}>{
            (this.fullscreen ? (
                <RouterView />
            ) : (
                <div class="min-h-screen relative flex justify-center min-w-[1440px]">
                    <div
                        class={'grid w-full h-full absolute top-0 left-0 grid-cols-[200px,auto]'}
                    >
                        <Left />
                        <Main />
                    </div>
                </div>
            )
            )
        }</ConfigProvider>
    }
}

export default toNative(AppView)
